<template>
    <div id="app">
        <Top style='width: 100%;height: 300px;'></Top>
        <div style="display: flex;flex-direction: row;">
            <Left style='width: 30%;height: 400px;'></Left>
            <router-view style="width: 70%;height: 400px;position: absolute;margin-top: -135px;margin-left: 150px;background-color: antiquewhite;"></router-view>
            <Middle style="position: absolute;margin-top: -160px;margin-left: 1060px;"></Middle>
        </div>
    </div>

</template>

<script>
    import Top from '../components/HomePage/Top.vue'
    import Right from '../components/HomePage/Right.vue'
    import Left from '../components/HomePage/Left.vue'
    import Middle from '../components/HomePage/Middle.vue'


    export default {
        name: 'HomePage',
        components: {
            Top,
            Right,
            Left,
            Middle
        }

    }
</script>
